import React from "react";
import { Route, Link, Routes, Navigate } from "react-router-dom";

import Home from "./pages/Home/index";
import About from "./pages/About";
import NotFound from "./pages/NotFound";
import Hello from "./pages/Hello";
import World from "./pages/World";

function A() {
  return (
    <div>
      <h2>AAAA</h2>
    </div>
  );
}

function B() {
  return (
    <div>
      <h2>BBBB</h2>
    </div>
  );
}

function App() {
  return (
    <div className="app">
      <div className="header"></div>
      <div className="main">
        <div className="left">
          {/* 导航区 */}
          <Link className="link active" to="/home">
            Home
          </Link>
          <Link className="link" to="/about">
            About
          </Link>
        </div>
        <div className="right">
          <Routes>
            <Route path="/home" element={<Home />}>
              {/* 
                嵌套的子路由，不需要在 Home 组件内区写 Route 了。
                而是直接在 定义路由规则的位子，直接写父子的嵌套关系的 Route
                Home 组件内，需要占着坑位，用来渲染匹配的 子路由组件。<Outlet />

                1. 当 url 访问路径为 /home 时，需要默认展示某个子路由的话，可以在 Route 组件上使用 index 属性
              */}
              <Route index element={<Hello />} />
              <Route path="hello" element={<Hello />} />
              <Route path="world" element={<World />} />
            </Route>
            <Route path="/about" element={<About />}>
              {/* 
                实现重定向，使用的是 Navigate 组件。
                  1. Route 下直接接 Route
                  2. Routes 下直接接 Route

                重定向需要的是 replace 模式，而 Navigate 默认跳转模式是 push 模式。可以设置 replace 属性让它为 replace 模式
              */}
              <Route path="" element={<Navigate to="/about/a" replace />} />
              <Route path="a" element={<A />}></Route>
              <Route path="b" element={<B />}></Route>
            </Route>
            {/* <Route path="*" element={<NotFound />} /> */}
          </Routes>
        </div>
      </div>
    </div>
  );
}

export default App;
